<!-- todoList -->
<template>
<div>
  <p class="text-3xl font-bold">WelCome</p>
  <p>全局 hooks 中的方法：{{hooks.formDate()}}</p>
  <div class="w-full h-8 leading-8 text-center m-3 font-bold text-xl" :title="title">{{gushi}}</div>
  <button @click="getData" class="px-4 h-8 peading-8 rounded-lg bg-sky-300 text-white hover:bg-sky-500 my-4 mx-auto">获取古诗</button>
</div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import {hooks, http} from '@/common'

// 以下是通过API随机获取一句古诗的示例
const gushi = ref('')
const title = ref('')
const getData = async () => {
  // 演示发送网络请求获取数据
  const res = await http.get('https://v1.jinrishici.com/all.json')
  console.log('res', res);
  gushi.value = res.content
  title.value = `《${res.origin}》-${res.author}`
}
getData()


</script>

<style scoped>

</style>